<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">
  <script src="https://jsmpeg.com/jsmpeg.min.js" charset="utf-8"></script>
  <title>播放rtsp</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      grid-gap: 10px;
      width: 1920px;
      height: 1080px;
    }

    .grid-item {
      border: 1px solid black;
      position: relative; /* 添加相对定位 */
    }

    canvas {
      width: 100%;
      height: 100%;
    }

    .channel-number {
      position: absolute; /* 添加绝对定位 */
      top: 0;
      left: 0;
      padding: 5px;
      font-size: 20px;
      font-weight: bold;
      color: white;
      background-color: rgba(0,0,0,0.5);
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item"><canvas id="canvas1"></canvas><div class="channel-number">101</div></div>
    <div class="grid-item"><canvas id="canvas2"></canvas><div class="channel-number">201</div></div>
    <div class="grid-item"><canvas id="canvas3"></canvas><div class="channel-number">301</div></div>
    <div class="grid-item"><canvas id="canvas4"></canvas><div class="channel-number">401</div></div>
    <div class="grid-item"><canvas id="canvas5"></canvas><div class="channel-number">501</div></div>
    <div class="grid-item"><canvas id="canvas6"></canvas><div class="channel-number">601</div></div>
    <div class="grid-item"><canvas id="canvas7"></canvas><div class="channel-number">701</div></div>
    <div class="grid-item"><canvas id="canvas8"></canvas><div class="channel-number">801</div></div>
    <div class="grid-item"><canvas id="canvas9"></canvas><div class="channel-number">901</div></div>
  </div>
</body>
<script>
  window.onload = () => {
    var canvasList = document.querySelectorAll('canvas');
    for (var i = 0; i < canvasList.length; i++) {
      if (i === 5 || i === 7) { // 跳过索引为2和4的Canvas元素
        continue;
      }
      var channel = i + 1;
      var rtspUrl = "rtsp://admin:hk12345678@192.168.10.201:554/Streaming/Channels/" + channel + "01";
      console.log('aqie', rtspUrl)
      new JSMpeg.Player("ws://192.168.20.149:10012/rtsp?url="+btoa(rtspUrl), {
        canvas: canvasList[i]
      });
      canvasList[i].parentNode.querySelector('.channel-number').textContent = channel + '01'; // 设置通道号文本内容
    }
  }
</script>
</html>